<template>
	<view style="padding: 0 20rpx; padding-top: 5rpx;">
		<view>
			<view class="above" style="display: flex; justify-content: space-between;">
				<view class="left" style="display: flex;">
					<u--image :src="comment.avatarUrl" width="60rpx" height="60rpx" shape="circle"
					></u--image>
					<view style="height: 60rpx; line-height: 60rpx; margin-left: 15rpx;">
						<u-text :text="comment.nickName" size="13" color="#496c53"></u-text>
					</view>
				</view>
				<view class="right" style="display: flex; align-items: center;">
<!-- 					<u--text prefixIcon="thumb-up" :text="comment.likeNum" size="13"></u--text> -->
					<u--image src="/static/more.png"  width="30rpx" height="30rpx"></u--image>
				</view>
			</view>
			<view class="content" style="padding-left: 63rpx;">
				<view>
					<u-parse :content="comment.content"></u-parse>
				</view>
				<view class="imgContent">
					<view v-for="(item, index) in comment.imgList" style="margin-right: 6rpx;" @click.stop="imgPreview(item)">
						<u--image :showLoading="true" :src="item" 
							width="210rpx" height="150rpx" mode="widthFix" radius="10">
						</u--image>
					</view>
				</view>
			</view>
			<view class="below" style="padding-left: 63rpx; margin-top: 8rpx;">
				<u--text type="info" :text="comment.timeShow" size="11" ></u--text>
			</view>
		</view>
		<!-- 子评论 -->
		<view style="margin: 5rpx 0 0 63rpx; background-color: #fafafa;">
			<view v-for="(item, index) in comment.childCommentList" @click.stop="openComment(comment.id, item.id, item.nickName, item.userId)" style="margin-bottom: 2rpx;">
				<postDiscussSmall :comment="item" ></postDiscussSmall>
			</view>
		</view>
	</view>
</template>

<script>
	
	import postDiscussSmall from './post-discuss-small.vue'
	import store from '@/store/index.js'
	
	export default {
		components: {
			postDiscussSmall
		},
		data() {
			return {
			}
		},
		methods: {
			// 调用父组件打开评论
			openComment(parentId, replyId, replyName, userId) {
				let info = {
					parentId,
					replyId : '0',
					replyName: ''
				}
				let currentUserId = this.$store.state.user.userId;
				if (currentUserId != null && currentUserId.length != 0 && currentUserId != userId) {
					info.replyId = replyId;
					info.replyName = replyName;
				}
				this.$emit('openComment', info);
			},
			// 图片大图
			imgPreview(current){
				uni.previewImage({
					current: current,
					indicator:"number",
					loop:true,
					urls: this.comment.imgList
				})
			},
		},
		props: {
			comment: {
				id: '',
				content: '',
				nickName: '',
				avatarUrl: '',
				timeShow: '',
				likeNum: 0,
				imgList: [],
				childCommentList: []
			}
		}
	}
	
</script>

<style scoped>
	
	.content u-parse {
		font-size: 0.8rem !important;
		color: #505050 !important;
	}
	
	.imgContent {
		display: flex;
		flex-wrap: wrap;
	}
	
</style>